<template>
  <!-- 租赁动态 -->
  <div class="lease-trend chart-box2">
    <div class="chart-title">租赁动态</div>
    <div class="chart-content">
      <ScrollTable :header="tableHeader" :list="data" :config="config" />
    </div>
  </div>
</template>

<script>
import { defineComponent, reactive, toRefs, watch } from "vue";
import common from "../../utils/common";
import store from "../../../../store";
import ScrollTable from "../common/ScrollTable.vue";

export default defineComponent({
  name: "LeaseTrend",
  components: { ScrollTable },
  setup() {
    const state = reactive({
      tableHeader: [
        { key: "owner_name", title: "租客名称" },
        { key: "event_name", title: "事件" },
        { key: "operate_time", title: "日期" },
        { key: "operate_user", title: "经办人" },
      ],
      data: [],
      config: {
        span: [8, 4, 6, 6],
        style: [{ color: common.theme.textGreen }],
      },
    });
    watch(
      () => store.getters.rentControl.LeaseTrendList,
      (val) => {
        if (val) {
          getData();
        }
      }
    );

    const getData = () => {
      const { LeaseTrendList } = store.getters.rentControl;
      if (LeaseTrendList) {
        state.data = LeaseTrendList.list.map((item) => {
          item.style = {
            event_name: {},
          };
          if (
            ["create", "change_create", "continue_create"].includes(
              item.operate_type
            )
          ) {
            item.style.event_name.color = common.theme.lightGreen;
          } else if (["delete", "retreat"].includes(item.operate_type)) {
            item.style.event_name.color = common.theme.primaryRed;
          } else {
            item.style.event_name.color = common.theme.primaryColor;
          }
          return item;
        });
      }
    };

    const init = () => {
      getData();
    };

    init();

    return {
      ...toRefs(state),
    };
  },
});
</script>

<style lang="less" scoped>
@import "../../styles/common.less";
</style>
